<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
<#--<link rel="icon" href="../../favicon.ico">-->

    <title>资源管理系统</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/dist/css/navbar-fixed-top.css" rel="stylesheet">

    <style>
        #pleaseWaitDialog {
            top: 30%;
        }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
    <!--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->
</head>

<body ng-app="accountApp" ng-controller="accountCtrl">

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">C-R-M</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/admin/account/index">资源管理</a></li>
                <li><a href="javascript:alert('功能持续开发中...')">字典管理</a></li>
                <li><a href="/admin/customer/index">客户管理</a></li>
                <li><a href="/admin/account/data">数据管理</a></li>
            </ul>
            <div id="navbar" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" placeholder="Email" class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-success">Sign in</button>
                </form>
            </div>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">账号管理</div>
        <div class="panel-body">
            <button class="btn btn-primary" id="vagueSearchBtn">
                模糊搜索
            </button>
            <button class="btn btn-primary"   id="preciseSearchBtn">
                精确搜索
            </button>
            <br><br>
            <div ng-show="showInfo(ext)" class="alert alert-danger" role="alert">
                以下账号未搜索到结果：<label id="none" ng-repeat="e in ext"><dd>{{e}} ,</dd></label>
            </div>
            <form class="form-inline" name="queryForm" id="queryForm">
                <!-- 隐藏字段-->
                <input type="hidden" name="pageIndex" id="pageIndex">
                <input type="hidden" name="searchType" id="searchType" value="0">
                <input type="hidden" name="searchField" id="searchField" value="0">

                <div class="collapse in" id="vagueSearch">
                    <div class="form-group">
                        <label for="exampleInputEmail1">账号Id=</label>
                        <input type="text" class="form-control" id="accountId" name="accountId" ng-model="accountId" placeholder="账号ID" >
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <select class="form-control" id="condition" name="condition">
                            <option value="and">并且</option>
                            <option value="or">或者</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">&nbsp;&nbsp;&nbsp;&nbsp;账号名称=</label>
                        <input type="text" class="form-control" id="accountName" name="accountName" placeholder="账号名称" >
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">&nbsp;&nbsp;&nbsp;&nbsp;账号属性=</label>
                        <input type="text" class="form-control" id="accountType" name="accountType" placeholder="账号属性" >
                    </div>
                    <br><br>
                    <div class="form-group">
                        <label for="exampleInputEmail1">成本大于</label>
                        <input type="number" min="0" class="form-control" id="lowerPrice" name="lowerPrice" placeholder="" >
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">且成本小于</label>
                        <input type="number" min="0" class="form-control" id="upperPrice" name="upperPrice" placeholder="" >
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">客户</label>
                        <select  class="form-control" ng-model="customer" ng-change="customerChange(customer)" ng-options="x.customerName for x in customers">
                        </select>
                    </div>
                </div>
                <div class="collapse" id="preciseSearch">
                    <div class="form-group">
                        <label for="">按名称批量查找</label>
                        <textarea class="form-control" id="accountNameArea" name="accountNameArea" rows="4"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">按ID批量查找</label>
                        <textarea class="form-control" id="accountIdArea" name="accountIdArea" rows="4"></textarea>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <label for="exampleInputEmail1">当价格小于</label>
                    <input type="number" min="0" class="form-control" id="conditionPrice" name="conditionPrice" value="0">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">&nbsp;&nbsp;&nbsp;&nbsp;时,加价</label>
                    <input type="number" min="0" class="form-control" id="value" name="value" value="0">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">&nbsp;&nbsp;&nbsp;&nbsp;否则乘以系数</label>
                    <input type="number" step="0.1" min="0" class="form-control" id="coefficient" name="coefficient" value="1">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="useDiscount" name="useDiscount">使用优惠
                    </label>
                </div>
                <button type="button" ng-click="queryData()" class="btn btn-success">查询</button>
                <button type="button" id="exportPrice" class="btn btn-primary">导出报价</button>
            </form>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>账号ID</th>
                <th>账号名称</th>
                <th>头条成本</th>
                <th>次条成本</th>
                <th>头条报价</th>
                <th>次条报价</th>
                <th>账号属性</th>
                <th>粉丝数量(万)(质量)</th>
                <th>优惠</th>
                <th>日期</th>
                <th>备注</th>
                <th>供应商</th>
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="account in accounts" >
                <th>{{account.id}}</th>
                <td>{{account.accountId}}</td>
                <td>{{account.accountName}}</td>
                <td>{{account.firstCost}}</td>
                <td>{{account.secondCost}}</td>
                <td>{{account.firstPrice}}</td>
                <td>{{account.secondPrice}}</td>
                <td>{{account.accountType}}</td>
                <td>{{account.fansNum}}({{account.fansQuality}})</td>
                <td>{{account.discount}}</td>
                <td>{{dateFormate(account)}}</td>
                <!-- 备注信息 -->
                <td>
                        <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top"
                                title="{{account.remark}}" tooltip> {{showSubRemark(account)}}
                        </button>
                </td>
                <td>
                    <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top"
                            title="{{showSubSupplierTips(account)}}" tooltip> {{showSubSupplier(account)}}
                    </button>
                </td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-key="{{account.id}}"
                            data-target="#pleaseWaitDialog">修改
                    </button>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="14" align="center">
                    <ul class="pagination">
                        <li ng-class="prevPageDisabled()"><a href="javascript:void(0);" ng-click="firstPage()"> &lt;&lt; </a></li>
                        <li ng-class="prevPageDisabled()"><a href="javascript:void(0);" ng-click="prevPage()">&lt;</a></li>
                        <li ng-repeat="n in pageItems" ng-class="{active: n == currentPage}">
                            <a href="javascript:void(0);" ng-click="setPage(n)">{{n}}</a>
                        </li>
                        <li ng-class="nextPageDisabled()"><a href="javascript:void(0);" ng-click="nextPage()">&gt;</a></li>
                        <li ng-class="nextPageDisabled()"><a href="javascript:void(0);" ng-click="lastPage()">&gt;&gt;</a></li>
                    </ul>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- 新增/修改 表单 -->
    <div class="modal fade" id="accountModal" tabindex="-3" role="dialog" style="overflow: auto"  aria-labelledby="accountModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="accountModalLabel">修改信息</h4>
                </div>
                <div class="modal-body" style="height: 450px;overflow: scroll;" >
                    <form class="form-horizontal" name="account-form" id="account-form">
                        <div class="form-group">
                            <label for="id" class="col-sm-2 control-label">序号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="id" name="id"
                                       placeholder="序号" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="accountId" class="col-sm-2 control-label">账号Id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="accountId" name="accountId"
                                       placeholder="账号ID" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="accountName" class="col-sm-2 control-label">账号名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="accountName" name="accountName"
                                       placeholder="账号名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstCost" class="col-sm-2 control-label">头条成本</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="firstCost" name="firstCost"
                                       placeholder="头条成本">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="secondCost" class="col-sm-2 control-label">次条成本</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="secondCost" name="secondCost"
                                       placeholder="次条成本">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="accountType" class="col-sm-2 control-label">账号属性</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="accountType" name="accountType"
                                       placeholder="账号属性">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="fansNum" class="col-sm-2 control-label">粉丝数量（万）</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="fansNum" name="fansNum"
                                       placeholder="粉丝数量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="fansQuality" class="col-sm-2 control-label">粉丝质量</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="fansQuality" name="fansQuality" placeholder="粉丝质量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstSupplier" class="col-sm-2 control-label">供应商</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="firstSupplier" name="firstSupplier"
                                       placeholder="供应商">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="secondSupplier" class="col-sm-2 control-label">初始供应商</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="secondSupplier" name="secondSupplier"
                                       placeholder="初始供应商">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="2" id="remark" name="remark"
                                          placeholder="备注"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="account-save" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- pleaseWaitDialog -->
    <div class="modal fade bs-example-modal-lg" id="pleaseWaitDialog" tabindex="-2" data-backdrop="static" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="gridSystemModalLabel">Process ...</h4>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                         aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only">45% Complete</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/dist/js/jquery.1.11.3.min.js"></script>
<script src="/static/dist/js/bootstrap.min.js"></script>
<script src="/static/dist/js/plugins/bootstrap-paginator.min.js"></script>
<script src="/static/dist/js/plugins/angular.min.js"></script>
<script src="/static/dist/js/controller/account-controller.js"></script>
<script src="/static/dist/js/account.js"></script>
</body>
</html>